<template>
	<view>
		<view v-if="item != null" class="oh">
			<view class="business-card border-radius-main">
				<view class="business-header">
					<image :src="item.logo" class="business-avatar" mode="aspectFill"></image>
					<view class="business-info">
						<view class="business-name-container">
							<view class="business-name">{{ item.name }}</view>
							<text class="business-distance" v-if="item.juli != 0">{{$t('extraction-address.extraction-address.42v8tv')}} {{item.juli}}km</text>
						</view>
						<view class="business-location">
							<uni-icons type="location" size="14" color="#999"></uni-icons>
							<text class="location-text">{{ item.province_name }} {{ item.city_name }}</text>
						</view>
					</view>
				</view>
				
				<view class="business-description multi-text">
					{{ item.com_describe }}
				</view>
				
				<view v-if="((item.com_label_arr || null) != null && item.com_label_arr.length > 0) || item.category_name != ''" class="business-categories">
					<text class="category-badge">{{item.category_name}}</text>
					<block v-if="(item.com_label_arr || null) != null && item.com_label_arr.length > 0">
						<text v-for="(item2, index2) in item.com_label_arr" :key="index2" class="category-badge">
						{{ item2 }}
						</text>
					</block>
				</view>
				
				<view v-if="item.com_zhengshu_arr.length > 0" class="business-certificates">
					<view v-for="(item2, index2) in item.com_zhengshu_arr" :key="index2" class="certificate-badge">
						<uni-icons type="medal" size="12" color="#f59e0b"></uni-icons>
						<text>{{ item2.name }}</text>
					</view>
				</view>
			
				<view class="business-footer pr" v-if="item.is_show_shopcard_seedetail == 1 || item.is_show_shopcard_seecard == 1">
					<button v-if="item.is_show_shopcard_seedetail == 1" class="view-info-btn" :data-value="'/pages/fcc/classinfo/companyshop-detail/companyshop-detail?id='+item.id" @tap="url_event">{{$t('fengcheche.classinfo.companyshop')}}</button>
					<button v-if="item.is_show_shopcard_seecard == 1 && (item.user_card_id || null) != null && item.user_card_id > 0" class="view-info-btn" :data-value="'/pages/fcc/classinfo/companycard-detail/companycard-detail?id='+item.user_card_id" @tap="url_event">{{$t('fengcheche.classinfo.seecarditem')}}</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();

	export default {
		name:"shop-card",
		data() {
			return {
			};
		},
		components: {
		},
		props: {
			propConfig: {
				type: [String, Object],
				default: null
			},
			propData: {
			    type: Object,
			    default: () => {
			        return {};
			    },
			},
			propSpec: {
				type: [String, Number],
				default: 0
			}
		},
		//对传值进行计算
		computed:{
			item(){
				return this.propData || null;
			}
		},
		methods: {
			// url事件
			url_event(e) {
				app.globalData.url_event(e);
			}
		}
	}
</script>

<style>
/*公司名片*/
.business-card {
  background-color: #ffffff;
  padding: 20rpx;
  margin:0 20rpx 20rpx;
  box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
}

.business-header {
  display: flex;
  gap: 20rpx;
}

.business-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
}

.business-info {
  flex: 1;
}

.business-name-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.business-name {
  font-size: 32rpx;
  font-weight: bold;
}
.business-name.spec{
	color:red;
}
.business-name.spec .t1{
	background-color: red;
	color:#fff;
	padding:0 15rpx;
	margin-right: 10rpx;
	border-radius: 10rpx;
	font-size:28rpx;
}

.business-distance {
  font-size: 24rpx;
  color: #999;
}

.business-contact {
  font-size: 26rpx;
  color: #666;
  margin-top: 4rpx;
}

.business-location {
  display: flex;
  align-items: center;
  margin-top: 8rpx;
}

.location-text {
  font-size: 24rpx;
  color: #999;
  margin-left: 4rpx;
}

.business-description {
  font-size: 26rpx;
  color: #666;
  background-color: #f9f9f9;
  padding: 6rpx;
  border-radius: 8rpx;
  margin-top: 16rpx;
}

.business-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 10rpx;
  margin-top: 16rpx;
}

.category-badge {
  font-size: 24rpx;
  color: #666;
  background-color: #f0f0f0;
  padding: 4rpx 12rpx;
  border-radius: 20rpx;
}

.business-certificates {
  display: flex;
  flex-wrap: wrap;
  gap: 10rpx;
  margin-top: 16rpx;
}

.certificate-badge {
  display: flex;
  align-items: center;
  font-size: 24rpx;
  color: #f59e0b;
  border: 1rpx solid #f59e0b;
  padding: 4rpx 12rpx;
  border-radius: 20rpx;
}

.business-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16rpx;
  padding-top: 16rpx;
  border-top: 1rpx solid #eee;
  height:80rpx;
}

.view-info-btn {
  font-size: 28rpx;
  color: #999;
  background-color: #fafafa;
  padding:0rpx 25rpx;
  border-radius:20rpx;
  margin-left: auto;
  height:70rpx;
  line-height: 70rpx;
}
</style>